<template>
	<view class="projectDetail" v-cloak>
		<view class="current">
		</view>
		<!-- <view class="current1">
		</view> -->
		<!-- <view class="myTitle">
			<view class="returLeft" @click="returnLeft">
				<u-icon name="arrow-left" class="" size="24" color="#fff"></u-icon>
			</view>
			<view class="titileCneter">
				项目详情
			</view>
		</view> -->
		<view class="top">
			<view class="navTitle">
				<view class="navItem" v-for="(i ,index) in navTile" :key="index"
					:style="{color:(navIndex == index?'#fff':'#D9D9D9')}" @click="getNavIndex(index)">
					<view class="leftIcon" :style="{color:(navIndex == index?'#fff':'#47578E')}" style="margin-right: 10rpx;">
						|
					</view>
					<view class="">
						{{i.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- <scroll-view enable-back-to-top=true scroll-y="true" :style="{height:height}" class="scrollHight"
			:scroll-top="scrollTop" @scrolltoupper="upper" @scrolltolower="lower">
				<projectDetail v-show="navIndex == 0" :type="type" :detailsData="proData" :detailsId="project_id"
					:detailComment="commentData" ref="project" @alter="alter" />
				<view class="progress">
					<projectProgress v-if="navIndex == 1" :projectList="projectList" :project_id="project_id"
						:item="item" :authAdd="false" @fresh="fresh" />
				</view>:style="{height:height}"
		</scroll-view> -->
		<scroll-view enable-back-to-top=true scroll-y="true"  class="scrollHight" :style="{height:height}"
			:scroll-top="scrollTop" @scrolltoupper="upper" @scrolltolower="lower">
				<projectDetail v-show="navIndex == 0" :type="type" :detailsData="proData" :detailsId="project_id"
					:detailComment="commentData" ref="project" @alter="alter" :edit="edit" @getMessage="showNews"/>
				<view class="progress" style="background: #fff;">
					<!-- :proItem="proItem" -->
					<projectProgress v-if="navIndex == 1" :projectList="projectList" :project_id="project_id" :proItem="proItem"
						:item="item" :authAdd="false" @fresh="fresh" />
				</view>
		</scroll-view>
		<view class="alterPro" v-if="type != 0 && navIndex == 0 && t == 1">
			<u-button class="custom-style" text="修改" :plain="true" @click="parentAlter" v-if="edit == false"
				customStyle="background-color:#fff ;color:#47578E;width: 40%;border-radius:50rpx;border: 0.5px solid #47578E;"></u-button>
			<u-button class="custom-style" text="完成" :plain="true" @click="parentChange" v-if="edit == true"
				customStyle="background-color:#fff ;color:#47578E;width: 40%;border-radius:50rpx;border: 0.5px solid #47578E;"></u-button>
			<u-button class="custom-style" text="删除" @click="parentCancel"
				customStyle="background-color: #fff;color:#F8594E;width: 40%; border-radius:50rpx;border:0.5px solid #F8594E"></u-button>
		</view>
		<view class="showEvaluate">
			<newsShow :showPop="showBottom" :title="bottomTitle" :tip="bottomTip" @refuse="refuse" @submit="subTel">
			</newsShow>
		</view>

		<view class="showEvaluate">
			<centerShow :showPop="showCenter" @refuse="refuse" @submit="subTel1" :tip='tip' :edit ='edit'>
			</centerShow>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import baseUrl from '@/request/baseUrl .js'
	import projectDetail from '@/components/common/projectDetail.vue'
	import projectProgress from '@/components/common/projectProgress.vue'
	import newsShow from '@/components/common/newsShow.vue'
	import centerShow from '@/components/common/centerShow.vue'
	import {
		projectInfo,
		projectComment,
		setComment,
		projectProcessList,
		projectUpd,
		projectdel,
		pushMsg
	} from '@/request/api.js'
	export default {
		props: {
			item: {
				type: String,
				default: ''
			}
		},
		components: {
			projectDetail,
			projectProgress,
			newsShow,
			centerShow
		},
		onShow(){
			this.getprojectProcessList()
		},
		onLoad(res) {
			// console.log(this.$refs.uToast,'uToast')
			this.project_id = res.id
			this.t = res.type
			this.item = res.item
			this.height = uni.getSystemInfoSync().windowHeight - 102 + 'px';
			this.projectInfo()
			// this.getprojectComment()
		},
		data() {
			return {
				proItem:null,
				tip: '',
				t:1,
				old: {
					scrollTop: 0
				},
				activeKey: 0,
				scrollTop: 0,
				height: 0,
				proData: {},
				type: 2,
				showCenter: false,
				edit:false,
				commentData: [],
				project_id: '',
				navTile: [{
						name: '项目详情'
					},
					{
						name: '项目进程'
					},
					// {
					// 	name: "项目评论"
					// }
				],
				navIndex: 0,
				showTitle: false,
				showBottom: false,
				bottomTitle: '',
				bottomTip: '',
				projectList: [],
				formData: {},
				user_id: '',
				edit: false,
				project_name:''
			}
		},
		methods: {
			showNews(){
				this.showEvaluate()//仅仅是为了调用显示消息弹框，以前的弹框是评价组件为common/bottomShow,现在改成了common/newsShow
			},
			parentCancel() {
				this.$refs.project.cancel()
			},
			parentAlter() {
				this.edit = true
				// this.$refs.project.alter()
			},
			parentChange() {
				this.$refs.project.alter()
			},
			upper: function(e) {
				
			},
			lower: function(e) {
				
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			sideChange(event) { // 通过这个方法可以实现回到顶部
				//视图会发生重新渲染
				this.scrollTop = this.old.scrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				console.log(event.detail)
			},

			async subTel1(e) {
				// console.log(this.tip)
				if (this.tip == '你确定修改这个项目吗？') {
					let res = await projectUpd(this.formData)
					// uni.$u.toast('修改成功')
					this.$refs.uToast.show({
						message: '修改成功',
						type: 'success',
						duration: 1500
					})
					this.projectInfo()
				} else { //删除
					let userInfo = uni.getStorageSync('userInfo')
					if (userInfo.user_per.includes(2) || this.user_id == userInfo.id) { //2为有权限只有有权限和个人才能删除项目
						let res = await projectdel({
							project_id: this.project_id
						})
						this.$refs.uToast.show({
							message: '删除成功',
							type: 'success',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
						// uni.navigateBack()
					} else {
						uni.$u.toast('您无权限')
					}

				}
				this.showCenter = false
			},
			alter(e) {
				// console.log(e)
				if (e == 1) {
					this.tip = '你确定删除这个项目吗？'
				} else {
					this.tip = '你确定修改这个项目吗？'
					this.edit = true
					this.formData = e
				}
				this.showCenter = true;
			},
			returnLeft() {
				uni.navigateBack()
			},
			typeList() {
				this.$refs.project.typeList()
			},
			async getprojectProcessList() {
				let res = await projectProcessList({
					project_id: this.project_id
				})
				this.projectList = res.data
				
			},
			async getprojectComment() {
				let res = await projectComment({
					project_id: this.project_id
				})
				this.userInfo = uni.getStorageSync('userInfo');
				let newData = res.data.map(item => {
					return item['avatar'] = `${this.userInfo.url}${item.avatar}`
				})
				// console.log(newData)
				this.commentData = res.data
				// console.log(this.commentData)
				// console.log(this.proData)
			},
			async projectInfo() {
				let res = await projectInfo({
					project_id: this.project_id,
					type:this.t
				})
				this.proData = res.data
				this.user_id = res.data.user_id
			},
			getNavIndex(e) {
				let url = baseUrl.replace(/api/,'')
				let item = {
					project_name: this.proData.project_name,
					project_no:this.proData.project_no,
					id:this.proData.id,
					project_logo:`${url}${this.proData.project_logo}`
				}
				this.proItem = item
				this.scrollTop = Math.random();
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				this.navIndex = e
				// console.log(this.proData)
				// this.$refs.project.setData()
				this.type = 2
				if (e == 2) {
					this.navIndex = 0
					this.showEvaluate()
					this.type = 2
				}
			},
			subTel(e,users) {
				console.log(e)
				if(e == ''){
					uni.showToast({
						title: '推送内容不能为空',
						icon: 'none',
						duration: 1500
					})
					return false;
				}
				if(users.length == 0){
					uni.showToast({
						title: '推送人不能为空',
						icon: 'none',
						duration: 1500
					})
					return false;
				}
				users = users.toString()
				pushMsg({
					content: e,
					user_list:users,
					project_id: this.project_id
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast('推送成功')
						this.showBottom = false
					}
				})
			},
			refuse() {
				this.showBottom = false
				this.showCenter = false
			},
			showEvaluate() {
				this.bottomTitle = '消息推送'
				this.bottomTip = '推送内容'
				this.showBottom = true
			},
		}
	}
</script>
<style>
	page {
		background-color: #ffffff !important;
	}
</style>
<style lang="scss" scoped>
	[v-cloak] {
		display: none !important;
	}

	.projectDetail {
		position: relative;
	}

	::v-deep .u-textarea {
		// background-color: #fff !important;
	}
	.alterPro {
		position: fixed;
		width: 100%;
		bottom: 0px;
		z-index: 0;
		left: 0;
		background: #fff;
		justify-content: center;
		align-items: center;
		height: 60px;
		// background: rebeccapurple;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		display: flex;
	}
	.scrollHight {
		top: 80rpx;
		position: absolute;
		// top: 100px;
		background: #fafafb;
		// background: rgba(255, 255, 255, 0.7);
		overflow: scroll;
	}

	.upload {
		padding: 20rpx;
		margin: 20px 20rpx 50px 0;
		background: #fff;
		z-index: 110;
	}

	.current {
		background: url(../../../static/my/bg.jpg);
		// background: url(../../static/selectBot.png);
		background-size: 100% 100%;
		height: 43px;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		overflow: hidden;
		left: 0;
		width: 100%;
		z-index: 1000;
	}

	.current1 {
		// background: url(../../../static/my/bg.jpg);
		// background: url(../../static/selectBot.png);
		background: linear-gradient(to bottom, rgba(21, 125, 250, 0), #c1e0fdbf);
		background-size: 100% 100%;
		height: 232px;
		background-repeat: no-repeat;
		position: fixed;
		bottom: 0;
		overflow: hidden;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.top {
		width: 100%;
		top: 0;
		position: fixed;
		z-index: 9999;
		// background: linear-gradient(to right , rgba(21, 125, 250, 0), #c1e0fdbf);
	}

	.navTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #979797;
		padding: 20rpx 0;
	}

	.navItem {
		width: 33.33%;
		text-align: center;
		display: flex;
		margin-left: 100rpx;
		// z-index: 100;
	}

	.myTitle {
		position: fixed;
		z-index: 1;

		// background: linear-gradient(to bottom, #fff, #e1f0fe);
		.returLeft {
			top: 54px;
			left: 40rpx;
			position: fixed;
			color: #fff;
		}

		.titileCneter {
			top: 54px;
			left: 50%;
			transform: translate(-50%);
			position: fixed;
			color: #fff;
			z-index: 110;
			font-size: 36rpx;
		}
	}

	.project {
		position: relative;
		margin-top: 150rpx;
	}

	.showView {
		// background: #fff;
	}

	.my_view {
		// margin-top: 100px;
		// overflow-y: auto;
		// position: initial;
		// background: #fff;
		// height: calc(100vh - 100px);
		margin-top: 119px;
		overflow-y: scroll;
		position: inherit;
		background: #fff;
		height: calc(100vh - 170px);
		padding-bottom: 100px;
		z-index: 999999999999999999;
	}
</style>

<style scoped lang="scss">
	// .current {
	// 	background: url(../../../static/my/bg.jpg);
	// 	// background: url(../../static/selectBot.png);
	// 	background-size: 100% 100%;
	// 	height: 232px;
	// 	background-repeat: no-repeat;
	// 	position: fixed;
	// 	top: 0;
	// 	overflow: hidden;
	// 	left: 0;
	// 	width: 100%;
	// 	z-index: 0;


	// }

	// .current1 {
	// 	// background: url(../../../static/my/bg.jpg);
	// 	// background: url(../../static/selectBot.png);
	// 	background: linear-gradient(to bottom, rgba(21, 125, 250, 0), #c1e0fdbf);
	// 	background-size: 100% 100%;
	// 	height: 232px;
	// 	background-repeat: no-repeat;
	// 	position: fixed;
	// 	bottom: 0;
	// 	overflow: hidden;
	// 	left: 0;
	// 	width: 100%;
	// 	z-index: 0;
	// }

	// .my_view {
	// 	height: 87vh;
	// 	overflow-y: scroll;
	// 	overflow-x: hidden;
	// 	-webkit-overflow-scrolling: touch !important;
	// 	// z-index: 111;
	// }

	// .myTitle {
	// 	width: 100%;

	// 	.returLeft {
	// 		top: 40px;
	// 		left: 40rpx;
	// 		position: fixed;
	// 		width: 100rpx;
	// 		z-index: 9999999;
	// 	}

	// 	.titileCneter {
	// 		top: 40px;
	// 		left: 50%;
	// 		transform: translate(-50%);
	// 		position: fixed;
	// 		color: #000;
	// 		z-index: 110;
	// 	}
	// }

	// .projectDetail {
	// 	position: relative;
	// 	font-size: 28rpx;
	// 	margin-top: 150rpx;
	// 	background: #fff;;
	// 	.top {
	// 		// position: fixed;
	// 		width: 100%;
	// 		z-index: 110;
	// 		height: 40rpx;
	// 		top: 140rpx;
	// 	}

	// 	.navTitle {
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: center;
	// 		color: #979797;
	// 		padding: 20rpx 0;
	// 	}

	// 	.navItem {
	// 		width: 33.33%;
	// 		text-align: center;
	// 		z-index: 100;
	// 	}

	// 	.showView {
	// 		background: #fff;
	// 	}
	// }
</style>
